<template>
  <div v-loading="loading" class="list-menu">
    <div class="search-container">
      <div class="title">{{ title }}</div>
      <el-input v-model="searchKey" placeholder="请输入名称搜索" size="small" />
    </div>
    <ul v-infinite-scroll="fetchData" class="list-container" style="overflow:auto">
      <li
        v-show="hasSelectAllButton"
        :class="[-1===id?'isActive':'']"
        class="list-item"
        @click="choose(selectAllOptions)"
      >{{ selectAllOptions.name }}</li>
      <li v-for="(item,index) in searchKey!==''?filterList:list" :key="index" @click="choose(item)">
        <div
          :class="[item.id===id?'isActive':'']"
          class="list-item"
          :title="'id:'+item.id"
        >{{ item.name+"("+item.serial+")" }}</div>
      </li>
      <li v-show="searchKey!==''&&filterList.length===0" class="list-item__empty">无匹配数据</li>
      <li v-show="searchKey===''&&!hasNextPage" class="list-item__finished">没有更多了</li>
    </ul>
  </div>
</template>

<script>
import { fetchList } from '@/api/servicer'
export default {
  props: {
    title: {
      type: String,
      default: '服务商列表'
    },
    hasSelectAllButton: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 配置
      selectAllOptions: { id: -1, name: '所有服务商' },
      pageNum: 1,
      pageSize: 999,
      total: 0,
      hasNextPage: true,
      // 状态
      loading: false,
      // 数据
      id: '',
      name: '',
      searchKey: '',
      list: [],
      filterList: []
    }
  },
  watch: {
    searchKey(newValue, oldValue) {
      let filterArr = this.list
      filterArr = filterArr.filter(value => {
        return value.name.indexOf(newValue) !== -1
      })
      this.filterList = filterArr
    }
  },
  created() {},
  mounted() {},
  methods: {
    /**
       * 获取数据
       */
    fetchData() {
      if (!this.hasNextPage) return
      this.loading = true
      fetchList({ pageNum: this.pageNum, pageSize: this.pageSize })
        .then(res => {
          this.list = this.list.concat(res.data.list)
          if (this.pageNum === 1 && this.hasSelectAllButton) {
            this.choose(this.selectAllOptions)
          } else if (this.pageNum === 1 && this.list.length > 0) {
            this.choose(this.list[0])
          }
          this.hasNextPage = res.data.hasNextPage
          this.pageNum += 1
        })
        .finally(() => {
          this.loading = false
        })
    },

    /**
       * 按钮组
       */
    // 选择菜单
    choose(item) {
      this.id = item.id
      this.name = item.name
      this.$emit('handleServicerMenu', {
        id: item.id,
        name: item.name
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .list-menu {
    width: 180px;
    background-color: #fff;
    border-radius: 5px;
    margin-right: 10px;
  }
  .search-container {
    padding: 20px 10px 10px;
    .title {
      line-height: 30px;
      margin-bottom: 18px;
      font-size: 20px;
      color: #303133;
      font-weight: bold;
    }
  }
  .list-container {
    font-size: 14px;
    height: calc(100vh - 230px);
    .list-item {
      cursor: pointer;
      width: 100%;
      padding: 10px;
      word-break: break-all;
      &:hover {
        background-color: #6394ff;
        color: #fff;
      }
    }
    .list-item__finished,
    .list-item__empty {
      color: #969799;
      font-size: 14px;
      line-height: 50px;
      text-align: center;
    }
    .isActive {
      color: #fff;
      background-color: #4d82f3;
    }
  }
</style>
